<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP

        几乎所有 Web 应用或网站都需要裁剪图片这一功能。在前端开发中，clip-path 属性被广泛应用于裁剪图片或元素，以创造出独特的视觉效果和 CSS 布局。
        本小节我们将专注于clip-path 的系统讲解，以图解的方式详细讲解clip-path 的 5 种裁剪技术，保证你看得懂，学得会。
        同时还会将图片裁剪技术与 transition结合，实现目前非常流行的滑动动画，让你学完就可以应用于实际的工作。

        CSS clip-path 属性功能强大，兼容性好，目前各大浏览器都支持。
        CSS clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的部分隐藏。
        CSS clip-path 属性值不为 none 时，会创建新的层叠上下文
        CSS clip-path 属性有很多不同的函数值（下表列出了常用的），可以将元素或图片裁剪成各种不同形状。

        属性值(函数)	说明
        inset()	    将元素或图片裁剪成一个矩形
        circle()	将元素或图片裁剪成一个圆形
        ellipse()	将元素或图片裁剪成一个椭圆
        polygon()	将元素或图片裁剪成一个多边形
    -->
</body>
</html>